<!--
 * @Description: 
 * @Date: 2022-07-07 11:45:05
 * @LastEditTime: 2022-10-28 15:35:17
 * @FilePath: \jsnode\css\xiala.html
-->
<!DOCTYPE html>
<html>

<head>
    <style>
        .select{
            float: left;
            list-style-type: none;
            background-color:#909090;
            color: #ffffff;
            padding: 5px;
        }
        .select:hover{
            background-color:blanchedalmond 0.5f;
        }
        .dis{
            display: none;
            position: absolute;
            background-color: cadetblue;
            padding: 5px;
            margin-top: 5px;
            margin-left: -5px;
        }
        .select:hover .dis{
            display: block;

        }
    </style>
</head>

<body style="background-color: #ffffff;">
    <ul>
        <li class="select">
            <div>选项A</div>
            <div class="dis">
                1111111111
            </div>
        </li>
        <li class="select">
            <div>选项B</div>
            <div class="dis">
                22222222
            </div>
        </li>
        <li class="select">
            <div>选项C</div>
            <div class="dis">
                333333333
            </div>
        </li>
        <li class="select">
            <div>选项D</div>
            <div class="dis">
                4444444444
            </div>
        </li>
    </ul>
</body>

</html>